
// 数据导出对话框

import React, { useState, useEffect } from 'react';
import DialogSimple from './DialogSimple';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import InputGroup from 'react-bootstrap/InputGroup';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import { Table } from 'react-bootstrap';
import dayjs from 'dayjs';

//props.isOpen
//props.onCancel
//props.lyrParams
//props.onOk
//props.onSelectROIClick
//props.appCurrentROI  app当前ROI
//props.selectedROI 该对话框选择的ROI
//props.loginedUser
//props.appDateA
//props.appDateB
function DialogSimpleExport(props) {

    const [fillValue, setFillValue] = useState(0);
    const [roiObject, setRoiObject] = useState(null);


    //初始化
    useEffect(() => {
        setFillValue(0);
        setRoiObject(null);
        if( typeof props.lyrParams !== 'undefined'
        && props.lyrParams!==null 
        && typeof props.lyrParams.bandList !== 'undefined' 
        && props.lyrParams.bandList !== null 
        && props.lyrParams.bandList.length > 0 ){
            setFillValue(props.lyrParams.bandList[0].noData) ;
        }
    }, [props.lyrParams]);


    //打开对话框更新 选中的ROI
    useEffect(() => {
        if (props.isOpen === true && props.selectedROI !== null) {
            setRoiObject(props.selectedROI);
        }
    }, [props.isOpen]);



    //clear ROI
    const onClearROIClick = function () {
        setRoiObject(null);
    }

    //use current app roi
    const onCurrentROIClick = function () {
        setRoiObject(props.appCurrentROI);
    }

    //renderContent
    const renderContent = function () {

        return (
            <div style={{ margin: 'auto', marginTop: '8px' }}>
                <Form style={{ textAlign: 'center' }}>
                    <Table style={{ margin: 'auto' }} >
                        <tbody>
                            <tr>
                                <td>数据名称:</td>
                                <td>
                                    <Form.Control
                                        placeholder='' type="text"
                                        style={{ width: '240px' }}
                                        disabled size='sm'
                                        value={(props.lyrParams !== null) ? (props.lyrParams.productDisplay.productname) : ""}
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    感兴趣区:
                                </td>
                                <td>
                                    <Form.Control
                                        placeholder='请选择感兴趣区'
                                        type="text"
                                        style={{ width: '240px' }}
                                        disabled size='sm'
                                        value={(roiObject !== null) ? roiObject.name : ""}
                                    />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                    <Button size='sm' variant="success" 
                                    style={{marginRight:'8px'}}
                                    onClick={onCurrentROIClick}>当前ROI</Button>
                                    <Button size='sm' variant="secondary" 
                                    style={{marginRight:'8px'}}
                                    onClick={props.onSelectROIClick}>选择ROI</Button>
                                    <Button size='sm' variant="warning" 
                                    onClick={onClearROIClick}>清除ROI</Button>
                                </td>
                            </tr>
                            <tr>
                                <td>填充值:</td>
                                <td>
                                    <Form.Control placeholder=''
                                        type="number"
                                        style={{ width: '240px' }}
                                        size='sm' value={fillValue}
                                        onChange={(e) => setFillValue(e.target.value)} />
                                </td>
                            </tr>
                        </tbody>
                    </Table>
                </Form>
            </div>
        )
    }

    //js Date 对象转Long型 YYYYMMDD000000 数据，注意目前时分秒使用0代替。
    const convertJsDate2Ymd14 = function (jsDate) {
        const dayjsdate = dayjs(jsDate);
        const datetime1 = dayjsdate.format("YYYYMMDD000000");
        return datetime1;
    }


    // onOk
    const onOk = function () {
        let taskObj = {};
        taskObj.uid = props.loginedUser.uid;
        taskObj.mode = "null";
        if (props.lyrParams.productDisplay.type === 'pe'
            || props.lyrParams.productDisplay.type === 'ud'
        ) {
            taskObj.mode = "pid";
            taskObj.pid = props.lyrParams.pid;
            taskObj.sid = 0;
            taskObj.sdui = "null";
        } else if (props.lyrParams.productDisplay.type === "pes" || props.lyrParams.productDisplay.type === "us") {
            taskObj.mode = "script";
            taskObj.pid = 0;
            const layerExtraParam = JSON.parse(props.lyrParams.productDisplay.params);
            taskObj.sid = layerExtraParam.sid;
            if (typeof props.lyrParams.sdui === 'undefined') {
                taskObj.sdui = "null";
            } else {
                taskObj.sdui = JSON.stringify(props.lyrParams.sdui);
            }
        } else {
            //unsuppoted layer type.
            console.log("DialogSimpleExport onOk failed, unsupported layer type " + props.lyrParams.productDisplay.type);
            return;
        }

        let datetime1 = convertJsDate2Ymd14(props.appDateA);
        if (props.lyrParams.front_group === 'B') {
            datetime1 = convertJsDate2Ymd14(props.appDateB);
        }

        taskObj.datetime = datetime1;
        if (roiObject === null) {
            console.log("DialogSimpleExport onOk failed, roiObject===null.");
            return;
        }
        taskObj.geojson = roiObject.geojson;
        taskObj.fillValue = fillValue;

        props.onOk(taskObj);
    }


    return <DialogSimple isOpen={props.isOpen} onCancel={props.onCancel} dialogTitle={"导出"} onOk={onOk} renderContent={renderContent} />;
}

export default DialogSimpleExport;
